<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('查看实验报告')" />
    <th:block th:include="include :: summernote-css" />
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-report-view" th:object="${experimentReport}">
        <input name="reportId" th:field="*{reportId}" type="hidden">

        <!-- 实验项目（不可修改） -->
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label">实验项目：</label>
                <div class="col-sm-8">
                    <input name="classProjectId" th:field="*{projectName}" class="form-control" type="text" readonly>
                </div>
            </div>
        </div>

        <!-- 关联学生（不可修改） -->
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label">关联学生：</label>
                <div class="col-sm-8">
                    <input name="studentId" th:field="*{studentName}" class="form-control" type="text" readonly>
                </div>
            </div>
        </div>

        <!-- 报告标题（不可修改） -->
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label">报告标题：</label>
                <div class="col-sm-8">
                    <input name="reportTitle" th:field="*{reportTitle}" class="form-control" type="text" readonly>
                </div>
            </div>
        </div>

        <!-- 报告内容（不可修改） -->
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label">报告内容：</label>
                <div class="col-sm-8">
                    <div class="summernote-view" th:utext="*{reportContent}"></div>
                    <input type="hidden" th:field="*{reportContent}">
                </div>
            </div>
        </div>

        <div class="col-xs-18">
            <div class="form-group">
                <label class="col-sm-3 control-label">实验目的和要求：</label>
                <div class="col-sm-8">
                    <div class="summernote-view" th:utext="*{experimentPurposeDemand}"></div>
                    <input type="hidden" th:field="*{experimentPurposeDemand}">
                </div>
            </div>
        </div>

        <div class="col-xs-18">
            <div class="form-group">
                <label class="col-sm-3 control-label">实验原理：</label>
                <div class="col-sm-8">
                    <div class="summernote-view" th:utext="*{experimentPrinciple}"></div>
                    <input type="hidden" th:field="*{experimentPrinciple}">
                </div>
            </div>
        </div>

        <div class="col-xs-18">
            <div class="form-group">
                <label class="col-sm-3 control-label">实验设备：</label>
                <div class="col-sm-8">
                    <div class="summernote-view" th:utext="*{experimentEquipment}"></div>
                    <input type="hidden" th:field="*{experimentEquipment}">
                </div>
            </div>
        </div>

        <div class="col-xs-18">
            <div class="form-group">
                <label class="col-sm-3 control-label">实验过程：</label>
                <div class="col-sm-8">
                    <div class="summernote-view" th:utext="*{experimentProcedure}"></div>
                    <input type="hidden" th:field="*{experimentProcedure}">
                </div>
            </div>
        </div>

        <div class="col-xs-18">
            <div class="form-group">
                <label class="col-sm-3 control-label">实验结果与分析：</label>
                <div class="col-sm-8">
                    <div class="summernote-view" th:utext="*{experimentResultAnalysis}"></div>
                    <input type="hidden" th:field="*{experimentResultAnalysis}">
                </div>
            </div>
        </div>

        <!-- 提交时间（不可修改） -->
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label">提交时间：</label>
                <div class="col-sm-8">
                    <input name="submitTime" th:value="${#dates.format(experimentReport.submitTime, 'yyyy-MM-dd')}"
                           class="form-control" type="text" readonly>
                </div>
            </div>
        </div>

        <!-- 成绩（可编辑） -->
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label">成绩：</label>
                <div class="col-sm-8">
                    <input name="score" th:field="*{score}" class="form-control" type="text">
                </div>
            </div>
        </div>

        <!-- 评语（可编辑） -->
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label">评语：</label>
                <div class="col-sm-8">
                    <textarea name="COMMENT" class="form-control">[[*{COMMENT}]]</textarea>
                </div>
            </div>
        </div>

        <!-- 教师评阅意见 -->
        <div>
            <div class="ry-card-title">教师评阅意见</div>
            <!-- 预习成绩 -->
            <div class="score-item">
                <div class="score-label d-flex align-items-center" style="gap: 8px; white-space: nowrap;">
                    （1）实验预习 (30分) 成绩：
                    <input type="text" class="form-control" style="width: 80px !important; flex-shrink: 0; display: inline-block;" placeholder="得分">
                </div>
                <ul style="list-style-type: disc; padding-left: 20px;">
                    <li style="margin-bottom: 8px;">预习认真、熟练掌握方法与步骤(30～28)</li>
                    <li style="margin-bottom: 8px;">有预习、基本掌握方法与步骤(27～22)</li>
                    <li style="margin-bottom: 8px;">有预习、但未能掌握方法与步骤(21～18)</li>
                    <li style="margin-bottom: 8px;">没有预习，不能完成实验(17～0)</li>
                </ul>
            </div>

            <!-- 操作过程成绩 -->
            <div class="score-item">
                <div class="score-label d-flex align-items-center" style="gap: 8px; white-space: nowrap;">
                    （2）操作过程 (40分) 成绩：
                    <input type="text" class="form-control" style="width: 80px !important; flex-shrink: 0; display: inline-block;" placeholder="得分">
                </div>
                <ul style="list-style-type: disc; padding-left: 20px; margin-top: 8px;">
                    <li style="margin-bottom: 8px;">结果详实、结论清晰、讨论合理(30～28)</li>
                    <li style="margin-bottom: 8px;">结果正确、讨论适当(27～22)</li>
                    <li style="margin-bottom: 8px;">结果正确、没有分析讨论(21～18)</li>
                    <li style="margin-bottom: 8px;">结果不正确、没有分析讨论(17～0)</li>
                </ul>
            </div>


            <!-- 结果分析成绩 -->
            <div class="score-item">
                <div class="score-label d-flex align-items-center" style="gap: 8px; white-space: nowrap;">
                    （3）结果分析 (30分) 成绩：
                    <input type="text" class="form-control" style="width: 80px !important; flex-shrink: 0; display: inline-block;" placeholder="得分">
                </div>
                <ul style="list-style-type: disc; padding-left: 20px; margin-top: 8px;">
                    <li style="margin-bottom: 8px;">结果详实、结论清晰、讨论合理(30～28)</li>
                    <li style="margin-bottom: 8px;">结果正确、讨论适当(27～22)</li>
                    <li style="margin-bottom: 8px;">结果正确、没有分析讨论(21～18)</li>
                    <li style="margin-bottom: 8px;">结果不正确、没有分析讨论(17～0)</li>
                </ul>
            </div>

            <!-- 其它意见 -->
            <div class="mb-4">
                <label class="form-label fw-medium">其它意见：</label>
                <textarea class="form-control" rows="4" placeholder="请填写其它评阅意见..."></textarea>
            </div>

            <!-- 签名区域 -->
            <div class="signature-area">
                <div>
                    <label class="form-label fw-medium">教师签名：</label>
                    <input type="text" class="form-control" style="width: 200px;" placeholder="教师签名">
                </div>
                <div>
                    <label class="form-label fw-medium">日期：</label>
                    <input type="date" class="form-control" style="width: 180px;">
                </div>
            </div>
        </div>


        <!-- 提交按钮 -->
        <div class="col-xs-12">
            <div class="form-group">
                <div class="col-sm-8 col-sm-offset-3">
                    <button type="button" class="btn btn-primary" onclick="submitHandler()">保存</button>
                    <button type="button" class="btn btn-default" onclick="window.history.back()">返回</button>
                </div>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: summernote-js" />
<script th:inline="javascript">
    var prefix = ctx + "college/report";

    $("#form-report-view").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/edit", $('#form-report-view').serialize());
        }
    }

    $(function() {
        // 为只读内容添加样式
        $('.form-control[readonly]').css('background-color', '#f5f5f5');

        // 富文本内容展示样式调整
        $('.summernote-view').css({
            'border': '1px solid #e5e6e7',
            'padding': '10px',
            'min-height': '300px',
            'border-radius': '4px',
            'background-color': '#f5f5f5'
        });
    });
</script>
</body>
</html>